<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒花图鉴与融合实验室</title>
    <style>
        /* :root 和 body 样式基本不变，略作调整 */
        :root {
            --bg-color: #1E1E2E;
            --tile-bg-color: #2A2A3E;
            --tile-border-color: #4A4A5E;
            --tile-hover-bg-color: #3A3A4E;
            --tile-hover-border-color: #F7B731;
            --text-color: #D0D0FF;
            --title-color: #F7B731;
            --subtitle-color: #8A8AAF;
            --modal-bg-color: #252535;
            --modal-header-bg: #F7B731;
            --modal-header-text: #1E1E2E;
            --modal-border-color: #F7B731;
            --info-icon-color: #F7B731;
            --strong-text-color: #50FA7B;
            --fusion-slot-bg: #2E2E42;
            --fusion-slot-border: #5A5A7E;
            --fusion-slot-hover-border: #F7B731;
            --fusion-result-bg: #222232;
        }

        body {
            font-family: 'PixelatedFont', 'SimSun', 'NSimSun', 'Courier New', Courier, monospace;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            -ms-interpolation-mode: nearest-neighbor;
        }

        .header-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .main-title {
            color: var(--title-color);
            font-size: 2.4em;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0 0 5px 0;
            text-shadow: 2px 2px #000000aa;
            border: 2px solid var(--title-color);
            display: inline-block;
            padding: 5px 15px;
            background-color: #00000033;
        }

        .subtitle {
            color: var(--subtitle-color);
            font-size: 0.9em;
            margin: 0;
        }

        .content-wrapper {
            width: 100%;
            max-width: 1200px; /* Max width for overall layout */
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .hop-dex-section, .fusion-lab-section {
            background-color: var(--tile-bg-color);
            border: 2px solid var(--tile-border-color);
            padding: 20px;
            border-radius: 6px;
        }

        .section-title {
            color: var(--title-color);
            font-size: 1.6em;
            text-align: center;
            margin-bottom: 20px;
            border-bottom: 2px dashed var(--tile-border-color);
            padding-bottom: 10px;
        }

        .hop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        .hop-tile {
            background-color: var(--tile-bg-color);
            border: 2px solid var(--tile-border-color);
            padding: 8px 6px;
            cursor: grab; /* Indicate draggable */
            text-align: center;
            transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 85px;
        }
        .hop-tile:active {
            cursor: grabbing;
        }

        .hop-tile:hover {
            background-color: var(--tile-hover-bg-color);
            border-color: var(--tile-hover-border-color);
            transform: scale(1.05);
        }

        .hop-tile .hop-symbol {
            font-size: 1.6em;
            font-weight: bold;
            color: var(--title-color);
            margin-bottom: 3px;
            line-height: 1;
            pointer-events: none; /* Prevent symbol from interfering with drag */
        }

        .hop-tile .hop-name-tile {
            font-size: 0.75em;
            color: var(--text-color);
            line-height: 1.1;
            word-break: break-word;
            pointer-events: none; /* Prevent name from interfering with drag */
        }

        /* Fusion Lab Styles */
        .fusion-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .fusion-slots {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .fusion-slot {
            width: 120px;
            height: 120px;
            background-color: var(--fusion-slot-bg);
            border: 3px dashed var(--fusion-slot-border);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--subtitle-color);
            font-size: 0.8em;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }
        .fusion-slot.drag-over {
            border-color: var(--fusion-slot-hover-border);
            background-color: #383848; /* Slightly lighter when dragging over */
        }
        .fusion-slot .slot-hop-symbol {
            font-size: 2em;
            font-weight: bold;
            color: var(--title-color);
            margin-bottom: 5px;
        }
        .fusion-slot .slot-hop-name {
            font-size: 0.9em;
            color: var(--text-color);
        }

        .fusion-controls button {
            background-color: var(--title-color);
            color: var(--modal-header-text);
            border: none;
            padding: 10px 20px;
            font-family: inherit;
            font-size: 1em;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.15s ease;
            margin: 0 5px;
        }
        .fusion-controls button:hover {
            background-color: #d4a029;
        }
        .fusion-controls button:disabled {
            background-color: var(--tile-border-color);
            color: var(--subtitle-color);
            cursor: not-allowed;
        }


        .fusion-result-area {
            margin-top: 20px;
            padding: 15px;
            background-color: var(--fusion-result-bg);
            border: 2px solid var(--tile-border-color);
            border-radius: 6px;
            min-height: 80px;
            width: 100%;
            max-width: 500px;
            text-align: center;
        }
        .fusion-result-area h4 {
            color: var(--title-color);
            margin-top: 0;
            margin-bottom: 10px;
        }
        .fusion-result-area p {
            font-size: 0.9em;
            line-height: 1.5;
            margin: 5px 0;
        }
        .fusion-result-area strong {
            color: var(--strong-text-color);
        }


        /* Modal Styles (mostly unchanged, can be collapsed for brevity if needed) */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.75); align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; }
        .modal-content { background-color: var(--modal-bg-color); border: 3px solid var(--modal-border-color); border-radius: 8px; width: 90%; max-width: 480px; box-shadow: 0px 0px 0px 3px #00000066, 0 5px 15px rgba(0,0,0,0.5); animation: slideIn 0.2s ease-out; overflow: hidden; }
        @keyframes slideIn { from { transform: translateY(-20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
        .modal-header { background-color: var(--modal-header-bg); color: var(--modal-header-text); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--modal-border-color); }
        .modal-header h2 { margin: 0; font-size: 1.3em; font-weight: bold; line-height: 1.3; }
        .close-button { font-size: 1.8em; font-weight: bold; color: var(--modal-header-text); background: none; border: 2px solid transparent; cursor: pointer; padding: 0 5px; line-height: 1; transition: color 0.15s ease, transform 0.1s ease; }
        .close-button:hover { color: #000000; transform: scale(1.1); }
        .modal-body { padding: 15px; display: flex; flex-direction: column; gap: 15px; }
        .modal-icon-area { background-color: var(--tile-bg-color); border: 2px solid var(--tile-border-color); width: 112px; height: 112px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 4px; }
        .modal-icon-area img { max-width: 100%; max-height: 100%; }
        .modal-info-section { border-top: 2px dashed var(--tile-border-color); padding-top: 15px; }
        .modal-info-section h3 { color: var(--title-color); margin-top: 0; margin-bottom: 12px; font-size: 1.2em; text-align: center; }
        .modal-info-section p { margin: 10px 0; font-size: 0.95em; line-height: 1.5; display: flex; align-items: flex-start; }
        .modal-info-section .info-icon { margin-right: 10px; color: var(--info-icon-color); font-size: 1.1em; min-width: 1.2em; padding-top: 2px; }
        .modal-info-section strong { color: var(--strong-text-color); margin-right: 5px; white-space: nowrap; }
    </style>
</head>
<body>

    <div class="header-container">
        <h1 class="main-title">酒花图鉴与融合实验室</h1>
        <p class="subtitle">探索酒花奥秘，尝试风味融合！</p>
    </div>

    <div class="content-wrapper">
        <section class="hop-dex-section">
            <h2 class="section-title">酒花图鉴 (拖动酒花到下方实验室)</h2>
            <div class="hop-grid" id="hopGrid">
                <!-- Hop tiles will be dynamically inserted here -->
            </div>
        </section>

        <section class="fusion-lab-section">
            <h2 class="section-title">酒花融合实验室</h2>
            <div class="fusion-area">
                <div class="fusion-slots">
                    <div class="fusion-slot" id="fusionSlot1" data-slot-id="1">拖入酒花1</div>
                    <div class="fusion-slot" id="fusionSlot2" data-slot-id="2">拖入酒花2</div>
                </div>
                <div class="fusion-controls">
                    <button id="fuseButton" disabled>开始融合</button>
                    <button id="clearButton">清空</button>
                </div>
                <div class="fusion-result-area" id="fusionResultArea">
                    <h4>融合建议</h4>
                    <p>请先将两种酒花拖入上方融合槽。</p>
                </div>
            </div>
        </section>
    </div>

    <!-- Modal Card (HTML unchanged) -->
    <div id="hopCardModal" class="modal">
        <!-- ... (modal content as before) ... -->
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalHopNameFull">酒花名称 (Symbol)</h2>
                <span id="closeModalBtn" class="close-button">×</span>
            </div>
            <div class="modal-body">
                <div class="modal-icon-area">
                    <img id="modalHopIcon" src="" alt="酒花像素图标">
                </div>
                <div class="modal-info-section">
                    <h3 id="modalInfoTitle">酒花信息</h3>
                    <p><span class="info-icon">🌍</span><strong>产地/类型:</strong> <span id="modalOrigin"></span></p>
                    <p><span class="info-icon">👃</span><strong>香气/风味:</strong> <span id="modalAroma"></span></p>
                    <p><span class="info-icon">🌿</span><strong>Alpha 酸:</strong> <span id="modalAlpha"></span></p>
                    <p><span class="info-icon">🍺</span><strong>常见风格:</strong> <span id="modalStyles"></span></p>
                    <p><span class="info-icon">💡</span><strong>备注:</strong> <span id="modalNotes"></span></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const hopsData = [
            // ... (使用您之前提供的包含中文的hopsData数组)
            // 为简化融合逻辑，给每个酒花增加一个'keywords'数组
            {
                id: 1, symbol: "Si", name: "Simcoe", name_zh: "西姆科",
                origin: "美国 - 双用途酒花",
                aroma: "强烈的松针、西柚、百香果香气，伴有泥土和些许莓果气息。",
                alpha: "12-14%", styles: "IPA (西海岸IPA), APA, DIPA。",
                notes: "以其独特的松针和树脂特性而闻名。",
                icon: "simcoe_pixel_icon.png",
                keywords: ["松针", "西柚", "树脂", "苦"]
            },
            {
                id: 2, symbol: "Ci", name: "Citra", name_zh: "奇楚果",
                origin: "美国 - 香型酒花",
                aroma: "柑橘 (西柚、青柠、橙子) 和热带水果 (芒果、百香果、荔枝) 香气。",
                alpha: "11-15%", styles: "IPA (NEIPA), APA, Session IPA。",
                notes: "爆炸性的水果风味。",
                icon: "citra_pixel_icon.png",
                keywords: ["柑橘", "热带水果", "芒果", "百香果", "甜香"]
            },
            {
                id: 3, symbol: "Mo", name: "Mosaic", name_zh: "马赛克",
                origin: "美国 - 香型酒花",
                aroma: "蓝莓、橘子、木瓜、玫瑰、青草、泡泡糖等多种香气。",
                alpha: "10-13%", styles: "IPA, APA。",
                notes: "如“马赛克”般丰富多变的香气。",
                icon: "mosaic_pixel_icon.png",
                keywords: ["蓝莓", "橘子", "热带水果", "复杂", "甜香"]
            },
            {
                id: 4, symbol: "Sa", name: "Saaz", name_zh: "萨兹",
                origin: "捷克 - 贵族香型酒花",
                aroma: "细腻的草本、花香和微弱的辛辣、泥土气息。",
                alpha: "2-5%", styles: "波西米亚皮尔森, 欧式拉格。",
                notes: "四大原始贵族酒花之一。",
                icon: "saaz_pixel_icon.png",
                keywords: ["草本", "花香", "辛辣", "泥土", "经典"]
            },
            {
                id: 5, symbol: "Ga", name: "Galaxy", name_zh: "银河",
                origin: "澳大利亚 - 香型酒花",
                aroma: "强烈的百香果、桃子、柑橘和菠萝等热带水果风味。",
                alpha: "13-16%", styles: "IPA (澳式IPA, NEIPA), Pale Ale。",
                notes: "浓郁的热带水果香气。",
                icon: "galaxy_pixel_icon.png",
                keywords: ["百香果", "桃子", "热带水果", "强劲", "甜香"]
            },
            {
                id: 6, symbol: "Cs", name: "Cascade", name_zh: "卡斯卡特",
                origin: "美国 - 香型酒花",
                aroma: "中等强度的花香、西柚等柑橘香气，带有些许辛辣感。",
                alpha: "4.5-7%", styles: "APA, 美式IPA。",
                notes: "美式精酿浪潮的奠基者。",
                icon: "cascade_pixel_icon.png",
                keywords: ["花香", "柑橘", "西柚", "经典"]
            },
            {
                id: 7, symbol: "Ce", name: "Centennial", name_zh: "世纪",
                origin: "美国 - 双用途酒花",
                aroma: "花香、柑橘香 (柠檬风味较突出)，苦度也更高。",
                alpha: "9-11.5%", styles: "IPA, APA。",
                notes: "常被称为“超级卡斯卡特”。",
                icon: "centennial_pixel_icon.png",
                keywords: ["花香", "柑橘", "柠檬", "苦", "经典"]
            },
            {
                id: 8, symbol: "Ch", name: "Chinook", name_zh: "奇努克",
                origin: "美国 - 双用途酒花",
                aroma: "显著的松针、树脂香气，伴有西柚皮的苦感和一丝烟熏、辛辣味。",
                alpha: "11.5-15%", styles: "美式IPA, APA, 世涛, 波特。",
                notes: "独特的松木特性，也能提供复杂香气。",
                icon: "chinook_pixel_icon.png",
                keywords: ["松针", "树脂", "西柚", "苦", "烟熏"]
            },
            {
                id: 9, symbol: "Am", name: "Amarillo", name_zh: "爱玛莉若",
                origin: "美国 - 香型酒花",
                aroma: "独特的花香、柑橘 (甜橙、柠檬) 以及桃子、杏子等核果香气。",
                alpha: "8-11%", styles: "APA, IPA。",
                notes: "独特的类似甜橙的柑橘风味。",
                icon: "amarillo_pixel_icon.png",
                keywords: ["花香", "甜橙", "柠檬", "桃子", "甜香"]
            },
            {
                id: 10, symbol: "Ns", name: "Nelson Sauvin", name_zh: "尼尔森苏维",
                origin: "新西兰 - 双用途酒花",
                aroma: "独特的白葡萄酒 (长相思葡萄)、醋栗、奇异果和淡淡的胡椒辛香。",
                alpha: "10-13%", styles: "IPA, Pale Ale, 赛森。",
                notes: "类似白葡萄酒的风味，优雅复杂。",
                icon: "nelson_sauvin_pixel_icon.png",
                keywords: ["白葡萄酒", "醋栗", "奇异果", "独特", "优雅"]
            }
            // ... 您可以继续添加更多酒花并为其定义 keywords
        ];

        document.addEventListener('DOMContentLoaded', () => {
            const hopGrid = document.getElementById('hopGrid');
            const modal = document.getElementById('hopCardModal'); // 图鉴详情弹窗
            const closeModalButton = document.getElementById('closeModalBtn');

            // 图鉴详情弹窗的 DOM 元素
            const modalHopNameFull = document.getElementById('modalHopNameFull');
            const modalHopIcon = document.getElementById('modalHopIcon');
            const modalOrigin = document.getElementById('modalOrigin');
            const modalAroma = document.getElementById('modalAroma');
            const modalAlpha = document.getElementById('modalAlpha');
            const modalStyles = document.getElementById('modalStyles');
            const modalNotes = document.getElementById('modalNotes');

            // 融合实验室的 DOM 元素
            const fusionSlot1 = document.getElementById('fusionSlot1');
            const fusionSlot2 = document.getElementById('fusionSlot2');
            const fuseButton = document.getElementById('fuseButton');
            const clearButton = document.getElementById('clearButton');
            const fusionResultArea = document.getElementById('fusionResultArea');

            let draggedHopId = null;
            let selectedHop1 = null; // 存储拖入槽1的酒花对象
            let selectedHop2 = null; // 存储拖入槽2的酒花对象

            const placeholderIcon = "";

            // --- 酒花图鉴功能 ---
            hopsData.forEach(hop => {
                const tile = document.createElement('div');
                tile.classList.add('hop-tile');
                tile.dataset.hopId = hop.id;
                tile.draggable = true; // 使瓦片可拖动

                const symbolEl = document.createElement('span');
                symbolEl.classList.add('hop-symbol');
                symbolEl.textContent = hop.symbol;

                const nameEl = document.createElement('span');
                nameEl.classList.add('hop-name-tile');
                nameEl.textContent = hop.name_zh;

                tile.appendChild(symbolEl);
                tile.appendChild(nameEl);
                hopGrid.appendChild(tile);

                // 点击图鉴瓦片仍然是打开详情 (可选，也可以移除点击，只保留拖拽)
                tile.addEventListener('click', (event) => {
                    // 防止在拖动时意外触发点击
                    if (event.detail === 0) return; // 拖动结束时 detail 通常是0
                    displayHopDetailModal(hop.id);
                });

                // 拖拽事件监听
                tile.addEventListener('dragstart', (event) => {
                    draggedHopId = hop.id;
                    event.dataTransfer.setData('text/plain', hop.id);
                    event.target.style.opacity = '0.5'; // 给拖动元素一个视觉反馈
                });

                tile.addEventListener('dragend', (event) => {
                    event.target.style.opacity = '1'; // 恢复不透明度
                    draggedHopId = null;
                });
            });

            function displayHopDetailModal(hopId) {
                const hop = hopsData.find(h => h.id === hopId);
                if (!hop) return;
                // ... (填充详情弹窗内容的代码，与之前版本相同)
                modalHopNameFull.textContent = `${hop.name_zh} (${hop.name} - ${hop.symbol})`;
                modalOrigin.textContent = hop.origin;
                modalAroma.textContent = hop.aroma;
                modalAlpha.textContent = hop.alpha;
                modalStyles.textContent = hop.styles;
                modalNotes.textContent = hop.notes || "暂无备注";
                const iconPath = `icons/${hop.icon}`;
                modalHopIcon.src = iconPath;
                modalHopIcon.onerror = () => { modalHopIcon.src = placeholderIcon; };
                modal.style.display = 'flex';
            }
            closeModalButton.addEventListener('click', () => { modal.style.display = 'none'; });
            window.addEventListener('click', (event) => { if (event.target === modal) modal.style.display = 'none'; });
            window.addEventListener('keydown', (event) => { if (event.key === 'Escape' && modal.style.display === 'flex') modal.style.display = 'none';});


            // --- 融合实验室功能 ---
            [fusionSlot1, fusionSlot2].forEach(slot => {
                slot.addEventListener('dragover', (event) => {
                    event.preventDefault(); // 必须阻止默认行为以允许drop
                    slot.classList.add('drag-over');
                });

                slot.addEventListener('dragleave', () => {
                    slot.classList.remove('drag-over');
                });

                slot.addEventListener('drop', (event) => {
                    event.preventDefault();
                    slot.classList.remove('drag-over');
                    const hopId = parseInt(event.dataTransfer.getData('text/plain'));
                    const hop = hopsData.find(h => h.id === hopId);

                    if (hop) {
                        if (slot.id === 'fusionSlot1') {
                            selectedHop1 = hop;
                        } else {
                            selectedHop2 = hop;
                        }
                        updateSlotDisplay(slot, hop);
                        checkFusionButtonState();
                    }
                });
            });

            function updateSlotDisplay(slotElement, hop) {
                if (hop) {
                    slotElement.innerHTML = `
                        <span class="slot-hop-symbol">${hop.symbol}</span>
                        <span class="slot-hop-name">${hop.name_zh}</span>
                    `;
                } else {
                    const slotId = slotElement.dataset.slotId;
                    slotElement.innerHTML = `拖入酒花${slotId}`;
                }
            }

            function checkFusionButtonState() {
                fuseButton.disabled = !(selectedHop1 && selectedHop2);
            }

            fuseButton.addEventListener('click', () => {
                if (selectedHop1 && selectedHop2) {
                    const result = calculateFusion(selectedHop1, selectedHop2);
                    displayFusionResult(result);
                }
            });

            clearButton.addEventListener('click', () => {
                selectedHop1 = null;
                selectedHop2 = null;
                updateSlotDisplay(fusionSlot1, null);
                updateSlotDisplay(fusionSlot2, null);
                fusionResultArea.innerHTML = `<h4>融合建议</h4><p>请先将两种酒花拖入上方融合槽。</p>`;
                checkFusionButtonState();
            });

            function calculateFusion(hop1, hop2) {
                let suggestion = "";
                let combinedKeywords = new Set([...hop1.keywords, ...hop2.keywords]);
                let keywordsArray = Array.from(combinedKeywords);

                suggestion += `<p>您选择了 <strong>${hop1.name_zh}</strong> 和 <strong>${hop2.name_zh}</strong>。</p>`;
                suggestion += `<p>它们共同可能带来：<strong>${keywordsArray.join("、")}</strong> 等风味特点。</p>`;

                // 简单的规则示例 (您可以扩展这些规则)
                if (keywordsArray.includes("柑橘") && keywordsArray.includes("松针") && (keywordsArray.includes("苦") || hop1.alpha.includes('10') || hop2.alpha.includes('10'))) {
                    suggestion += `<p>风味倾向：可能适合酿造一款经典的<strong>西海岸IPA</strong>，具有清爽的苦度和明亮的柑橘、松针香气。</p>`;
                } else if (keywordsArray.filter(k => ["热带水果", "芒果", "百香果", "甜香", "橘子"].includes(k)).length >= 2 && keywordsArray.filter(k => ["苦", "松针", "树脂"].includes(k)).length === 0) {
                    suggestion += `<p>风味倾向：非常适合酿造<strong>NEIPA (浑浊IPA)</strong>，强调多汁的热带水果风味和柔和的口感。</p>`;
                } else if (keywordsArray.includes("草本") && keywordsArray.includes("花香") && keywordsArray.includes("经典")) {
                    suggestion += `<p>风味倾向：这组搭配带有贵族酒花的经典特征，适合酿造优雅的<strong>皮尔森</strong>或<strong>传统拉格</strong>。</p>`;
                } else if (keywordsArray.includes("柑橘") && keywordsArray.includes("花香") && !keywordsArray.includes("苦")) {
                     suggestion += `<p>风味倾向：这组搭配很适合酿造一款香气愉悦的<strong>美式淡色艾尔 (APA)</strong>。</p>`;
                } else if (hop1.name === "Citra" && hop2.name === "Mosaic" || hop1.name === "Mosaic" && hop2.name === "Citra") {
                    suggestion += `<p>风味倾向：这是酿造现代<strong>IPA/NEIPA</strong>的黄金搭档！预计会有爆炸性的水果风味。</p>`;
                }
                else {
                    suggestion += `<p>风味倾向：这是一个有趣的组合，值得尝试！具体风味需要您亲自探索。</p>`;
                }

                let avgAlpha = (parseFloat(hop1.alpha) + parseFloat(hop2.alpha)) / 2; // 简化Alpha酸估算
                suggestion += `<p>大致苦度潜力：中等${avgAlpha > 8 ? (avgAlpha > 12 ? '偏高':'') : '偏低'} (仅供参考)。</p>`;


                return suggestion;
            }

            function displayFusionResult(resultHTML) {
                fusionResultArea.innerHTML = `<h4>融合建议</h4>${resultHTML}`;
            }

            // 初始化按钮状态
            checkFusionButtonState();
        });
    </script>

</body>
</html>